<template>
	<view class="out">
		<view class="top">
			<view class="header">
				<view class="search  iconfont  icon-sousuo"></view>
				<input class="ipt" type="text" value="" placeholder="找知识,找培训,找老师" placeholder-class="placeholder" />
			</view>
			<view class="category">
				<view class="categoryItem " :class="index===indextab&&'active' "   @click="cut(index)" v-for="(item, index) in categorylist" :key="item.cat_id">
					<view class="logo iconfont " :class="item.icon"></view>
					<view class="text">{{ item.n }}</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll" scroll-y="true" enable-flex>
			<view class="scrollTitle"><image class="ImgTitle" src="https://p.qpic.cn/qqconadmin/0/bc143157ee2749519f1cd7be7cb825bc/0" mode=""></image></view>
			<view class="scrollInfoList" v-for="(subjectitem, index) in subject" :key="subjectitem.cat_id">
				<view class="scrollInfoLift">{{ subjectitem.n }}</view>
				<view class="scrollInfoRight">
					<view class="RightItem" v-for="(item, index) in subjectitem.t_list" :key="item.cat_id">{{ item.n }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	mounted() {
		this.getexamineDate();
	},
	data() {
		return {
			indextab: 0
		};
	},
	methods: {
		getexamineDate() {
			this.$store.dispatch('category/getExamine');
		},
		cut(index) {
			this.indextab = index;
		}
	},
	computed: {
		...mapState('category', ['categorylist']),
		subject() {
			return (this.categorylist[this.indextab] || []).s_list;
		}
	}
};
</script>

<style lang="stylus">
.out
	height 100%
	.top
		background-color #2ab9ff
		border 2rpx solid #FFFFFF
		box-sizing border-box
		height 260rpx
		.header
			display flex
			height 60rpx
			align-items center
			margin 20rpx 40rpx 0rpx
			padding 0 20rpx
			border 1rpx solid #65cdff
			border-radius 50rpx
			background-color #65cdff
			.search
				width 40rpx
				height 40rpx
				color #FFFFFF
				font-size 36rpx
				margin 0 10rpx
			.ipt
				flex 1
			.placeholder
				color #FFFFFF
				font-size 28rpx
		.category
			display flex
			justify-content space-around
			padding 6rpx
			.categoryItem
				margin-top 10rpx
				&.active
					border-bottom 2rpx solid #FFFFFF
				.logo
					width 50rpx
					height 50rpx
					color #FFFFFF
					font-size 50rpx
					margin 20rpx 0
					text-align center
				.text
					color #FFFFFF
					font-size 28rpx
					height 60rpx
					text-align center
	.scroll
		height calc(100vh - 260rpx)
		.scrollTitle
			.ImgTitle
				width 100%
				height 300rpx
		.scrollInfoList
			padding 0 20rpx
			/* height 200rpx */
			display flex
			border-bottom 2rpx solid #C0C0C0
			align-items center
			justify-content center
			.scrollInfoLift
				height 150rpx
				width 200rpx
				line-height 150rpx
				text-align center
				font-size 26rpx
				/* background-color #007AFF */
			.scrollInfoRight
				/* background-color #2AB9FF */
				/* height 150rpx */
				flex 1
				display flex
				flex-wrap wrap
				padding 20rpx 0
				.RightItem
					padding 0 20rpx 20rpx
</style>
